<template>
  <c-model
    v-model="show"
    title="租赁协议"
    width="620px"
    :maskClosable="false"
    customClass="agreement-model"
  >
    <div class="agreement-body">
      <h3 class="tc">电竞蜂用户租赁服务协议</h3>
      <div v-html="html"></div>
    </div>
    <div slot="footer"></div>
<!--    <div class="footer" slot="footer">
      <i-button :type="!!timmer ? 'default': 'primary'" :disabled="!!timmer" v-if="scrollBottom" @click="submit">
        {{!timmer ? '我已阅读并同意': `请认真阅读 ${timmer}s` }}
      </i-button>
    </div>-->
  </c-model>
</template>
<script>
import mammoth from "mammoth";
import doc from "@/assets/files/leaseAgreement.docx";
import {dateFormat} from "@/common/utils";
export default {
  name: "agreement",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    device: {
      type: Object,
      default: {}
    },
    currMoney: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      html: "",
      scrollBottom: false,
      timmer: 5
    };
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },

  },
  methods: {
    init() {
      this.getWordText();
    },
    getWordText() {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", doc);
      xhr.responseType = "blob";
      xhr.onload = () => {
        mammoth.convertToHtml({ arrayBuffer: xhr.response }).then((result) => {
          let htmlContent = result.value.replace(/ol/g, 'ul').replace(/签订时间：/g, '签订时间：'+dateFormat(new Date(), 'yyyy-MM-dd'));

          // 创建一个临时的 DOM 元素来解析和修改 HTML
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = htmlContent;

          // 查找包含"设备名称"的单元格
          const cells = tempDiv.querySelectorAll('td');
          for (let i = 0; i < cells.length; i++) {
            const cellText = cells[i].textContent.trim();
            if (cellText === '设备名称' && cells[i + 1]) {
              cells[i + 1].innerHTML = `<p>${this.device.equipmentName}</p>`;
            }
            if (cellText === '品牌及型号' && cells[i + 1]) {
              cells[i + 1].innerHTML = `<p>${this.device.brand || '-'}</p>`;
            }
            if (cellText === '数量' && cells[i + 1]) {
              cells[i + 1].innerHTML = '<p>1</p>';
            }
            if (cellText === '市场价值' && cells[i + 1]) {
              cells[i + 1].innerHTML = `<p>${this.device.cashMoney}</p>`;
            }
          }

          const tables = tempDiv.querySelectorAll('table');
          if (tables.length > 1) {
            const secondTable = tables[1];
            const rows = secondTable.querySelectorAll('tr');
            if (rows.length > 1) {
              const secondRow = rows[1];
              const cells = secondRow.querySelectorAll('td');
              if (cells[0]) {
                cells[0].innerHTML = `<p>${dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')}</p>`;
              }
              if (cells[1]) {
                cells[1].innerHTML = `<p>${this.currMoney.hours}小时</p>`;
              }
              if (cells[2]) {
                cells[2].innerHTML = `<p>${this.currMoney.price}元</p>`;
              }
            }
          }

          this.html = tempDiv.innerHTML;
        });
      };
      xhr.send();
    },
    onScroll(e) {
      let target = e.target;
      if (this.scrollBottom) return
      if (target.scrollHeight - target.offsetHeight - target.scrollTop == 0) {
        this.scrollBottom = true;
        this.inner = setInterval(() => {
          this.timmer--;
          if (this.timmer == 0) {
            clearInterval(this.inner);
          }
        }, 1000);
      }
    },
    submit() {
      this.$emit('success')
      this.show = false
    }
  },
  watch: {
    show(val) {
      clearInterval(this.inner);
      this.scrollBottom = false
      this.timmer = 5
      this.html = "";
      val && this.init();
    }
  },
};
</script>

<style scoped lang="scss">
.agreement-body {
  height: 500px;
  overflow-y: auto;

  ::v-deep ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      position: relative;
      padding-left: 20px;
      &::before {
        content: counter(list-item) ".";
        display: inline-block;
        width: 20px;
        position: absolute;
        left: 0;
        top: 0;
      }
      ul {
        padding-left: 20px;
        li {
          list-style-type: disc;
          padding-left: 0;
          margin-left: 0;
          &::before {
            content: "";
            display: inline-block;
            width: 20px;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }
  }

  ::v-deep table {
    display: table;
    border: 1px solid #f1f1f1;
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    td {
      border: 1px solid #f1f1f1;
      padding: 5px;
    }
  }
}
.footer {
  text-align: center;
  padding-bottom: 20px;
}
</style>
